<script>
export default {
  name: "TableView",
  data() {
    return {
      title: "新增",
      total: 100,
      size: 5,
      currentPage: 1,
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      multipleSelection: [],
      form: {
        name: '',
        address: ''
      },
      formLabelWidth: "80px",
      dialogFormVisible: false,   //  true  弹窗显示   false  隐藏
    }
  },
  methods: {
    /*编辑回调*/
    handleEdit(index, row) {
      this.title = "编辑"
      this.dialogFormVisible = true
    },
    /*删除回调*/
    handleDelete(index, row) {
      this.$message.success(index + JSON.stringify(row))
    },
    /*rows表示选中行数据*/
    handleSelectionChange(rows) {
      /*通过map遍历实现筛选行数据   只保存行数据中的id*/
      this.multipleSelection = rows.map(v => v.id)
      this.$message.success(JSON.stringify(this.multipleSelection))
    },
    /*每页展示的条数改变时触发*/
    handleSizeChange(val) {
      this.size = val
      // TODO  发送http请求  获取分页数据
    },
    /*页码改变时触发*/
    handleCurrentChange(val) {
      this.currentPage = val
      // TODO  发送http请求  获取分页数据
    },
    add() {
      this.dialogFormVisible = true
    },
    batchDel() {
      this.$message.success("delete")
    },
    clearInfo(){
        this.title="新增"
    }
  }
}
</script>

<template>
  <!--
   data : 声明表格中需要展示的数据
   prop: 声明需要渲染对象中的哪个属性值
   -->
  <div id="container">
    <div id="header-btn">
      <el-button size="small" type="primary" plain @click="add">新增</el-button>
      <el-button size="small" type="danger" plain @click="batchDel">批量删除</el-button>
    </div>
    <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="ID"
      >
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
      >
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div id="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="size"
          :page-sizes="[5, 10, 15, 20]"

          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!--  模态窗-->
    <div id="dialog">
      <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearInfo">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<style scoped>
#container {
  box-sizing: border-box;
  padding: 20px;
}

#pagination {
  margin-top: 20px;
}

#header-btn {
  text-align: left;
  margin-bottom: 20px;
}
#dialog{
  text-align: left;
}
</style>